<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'

	import tabbarData from '@/assets/data/tabber.js'
	import { getAssetURL } from '@/utils/get-assets.js'

	const currentIndex = ref(0)
	const router = useRouter()
	function activeClick(index, item) {
		currentIndex.value = index
		router.push(item.path)
	}
</script>

<template>
	<div class="tab-bar">
		<template
			v-for="(item, index) in tabbarData"
			:key="index">
			<div
				class="tab-bar-item"
				:class="{ active: currentIndex === index }"
				@click="activeClick(index, item)">
				<img
					v-if="currentIndex !== index"
					:src="getAssetURL(item.image)"
					alt=""
					class="img" />
				<img
					v-else
					:src="getAssetURL(item.imageActive)"
					alt=""
					class="img" />
				<span class="text">{{ item.text }}</span>
			</div>
		</template>
	</div>
</template>

<style lang="scss" scoped>
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 50px;
		display: flex;
		border-top: 1px solid #f3f3f3;
		.tab-bar-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&.active {
				color: var(--main-color);
			}
			.img {
				width: 32px;
			}
			.text {
				font-size: 12px;
				margin-top: 2px;
			}
		}
	}
</style>
